<template>
	<div id="login">
		<div class="headBox">
			<div class="logo"></div>
			<p class="text">故宫文化</p>
		</div>
		<div class="phoneNumberBox">
			<input  type="text" class="phoneNumber" placeholder="+86  手机号" v-model="username"/>
			<input type="button" value="获取验证码" class="phoneBtn"/>
		</div>
		<div class="verificationBox">
			<input  type="password" class="verification" placeholder="请输入验证码" v-model="password"/>
		</div>
		<div class="agreementTextBox">
			<input type="checkbox" class="checkBox" @click="check()"/>
			<span class="agreementText" @click="check()">我已阅读同意用户协议</span>
		</div>
		<input  type="button" class="loginBtn" value="登录" @click="login"/>
		<span class="xuxian"></span>
		<span class="othertext">第三方登录</span>
		<span class="xuxian2"></span>
		<ul class="list">
			<li class="wechat"></li>
			<li class="qq"></li>
			<li class="weibo"></li>
		</ul>
		<div class="footer"></div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data(){
			return{
				flag:false,
				userInfo: {
					username: '123',
					password: '123',
				},
				username: '',
				password: '',
			}
		},
		components: {

		},
		methods:{
			check(){
				this.flag=true
				
			},
			login() {
				let json = {
					user: this.username,
					password: this.password
				}
				// localStorage.getItem("username", this.username);
				if(this.flag==true){
					if (json.user == this.userInfo.username && json.password == this.userInfo.password) {
						alert('登录成功')
						
						this.$router.push({
							path: 'shouye'
						})
					} else {
						alert('账号或密码错误')
					}
				}else{
					alert('请阅读用户协议')
				}
				
				
			}
		}
	}
</script>

<style scoped="scoped">
	#login .headBox{
		height: 2.20rem;
		background-image: url(../../assets/img/bg_login.png);
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}
	
	#login .logo{
		width: 0.54rem;
		height: 0.54rem;
		background: url(../../assets/img/home_image_logo.png) ;
		background-repeat: no-repeat;
		background-position: center; 
		background-size: cover;
		position: absolute; 
		top: 0.83rem;
		left: 1.60rem;
	} 
	
	#login .text{
		font-size: 0.14rem;
		color: #FFEBB9;
		opacity: 1;
		position: absolute;
		top: 1.52rem;
		left: 1.60rem;
	}
	
	#login .phoneNumberBox,.verificationBox{
		display: flex;
		border-bottom: 0.01rem dashed gray;
		width: 2.95rem;
		margin-left: 0.41rem;
		padding-bottom: 0.09rem;
	}
	
	#login .phoneNumberBox{
		justify-content: space-between;
		margin-top: 0.64rem;
	}
	
	#login .verificationBox{
		margin-top: 0.38rem;
		
	}
	
	#login .phoneNumber,.verification{		
		color: #CCCCCC;
		font-size: 0.14rem;
		border: none;
		
	}
	
	#login .phoneBtn{
		background-color: #FFFFFF;
		border: none;
		font-size: 0.14rem;
	}
	
	#login .agreementTextBox{
		margin-left: 0.4rem;
		margin-top: 0.24rem;
		display: flex;
		
	}
	
	#login .checkBox{
		width: 0.16rem;
		height: 0.16rem;
		background: #E6E6E6;
		border: none;
		vertical-align: middle;
	}
	
	#login .agreementText{
		font-size: 0.12rem;
		color: #CCCCCC;
		margin-left: 0.1rem;
	}
	
	#login .loginBtn{
		width: 2.95rem;
		height: 0.38rem;
		background: #C91328;
		border: none;
		font-size: 0.16rem;
		color: #FFFCFC;
		position: absolute;
		left: 0.40rem;
		top: 4.4rem;
	}
	
	
	#login .othertext{
		font-size: 0.12rem;
		color: #999999;
		position: absolute;
		top: 6.58rem;
		left: 1.58rem;
	}
	
	#login .xuxian{
		display: inline-block;
		width: 0.6rem;
		border-bottom: 0.01rem dashed #808080;
		position: absolute;
		top: 6.66rem;
		left: 0.86rem;
	}
	
	#login .xuxian2{
		display: inline-block;
		width: 0.6rem;
		border-bottom: 0.01rem dashed #808080;
		position: absolute;
		top: 6.66rem;
		left: 2.35rem;
	}
	
	#login .list{
		position: absolute;
		top: 6.98rem;
		left: 0.59rem;
		display: flex;
	}
	
	#login .list li{
		width: 0.48rem;
		height: 0.48rem;
		margin-left: 0.57rem;
	}
	
	#login .wechat{
		margin-left: 0;
		background-image: url(../../assets/img/wechat.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
	
	#login .qq{
		background-image: url(../../assets/img/qq.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
	
	#login .weibo{
		background-image: url(../../assets/img/weibo.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
	
	#login .footer{
		width: 1.34rem;
		height: 0.05rem;
		background-color: #000000;;
		position: absolute;
		left: 1.21rem;
		top: 7.98rem;
	}
</style>
